<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>layuiAdmin</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" href="../css/style.css">
</head>
<body>

<table id="demo" lay-filter="test"></table>
</body>
</html>
<!--顶部操作栏-->
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
    </div>
</script>
<!--每条数据的操作栏-->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>

    <!-- 这里同样支持 laytpl 语法，如： -->
    {{#  if(d.auth > 2){ }}
    <a class="layui-btn layui-btn-xs" lay-event="check">审核</a>
    {{#  } }}
</script>
<script type="text/html" id="editDialog">
    <form class="layui-form" action="" style="padding: 20px;" id="modify" lay-filter="editDialogForm">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-inline">
                <input type="text" name="username" placeholder="请输入新用户名" autocomplete="off" class="layui-input" required>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">新密码</label>
            <div class="layui-input-inline">
                <input type="text" name="password" placeholder="请输入新密码" autocomplete="off" class="layui-input" required>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">邮箱</label>
            <div class="layui-input-inline">
                <input type="email" name="email" placeholder="请输入邮箱" autocomplete="off" class="layui-input" required>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">设为管理员</label>
            <div class="layui-input-inline">
                <input type="radio" name="isAdmin" value="1" title="是" required>
                <input type="radio" name="isAdmin" value="0" title="否" checked required>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">封禁状态</label>
            <div class="layui-input-inline">
                <input type="radio" name="isBanned" value="1" title="封禁" required>
                <input type="radio" name="isBanned" value="0" title="正常" checked required>
            </div>
        </div>
    </form>
</script>
<script src="../js/jquery-3.5.1.js"></script>
<script src="../layui/layui.all.js"></script>
<script src="../js/common.js"></script>
<script>
    layuiModules=['table', 'layer','form'];

    function mounted() {
        //第一个实例
        table.render({
            elem: '#demo'
            , toolbar: '#toolbarDemo'
            , height: 550
            , defaultToolbar: []
            , url: 'userList.php' //数据接口
            , page: true //开启分页
            , cols: [[ //表头
                {checkbox: true, LAY_CHECKED: false}
                , {field: 'uid', title: 'uid', width: 100, sort: true}
                , {field: 'username', title: '用户名', width: 300}
                , {field: 'email', title: '邮箱', width: 300/*, sort: true*/}
                , {field: 'regDate', title: '注册时间', width: 300}
                , {field: 'isBanned', title: '用户被封禁', width: 100}
                , {field: 'isAdmin', title: '管理员', width: 80}
                , {fixed: 'right', width: 160, align: 'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
            ]]
            ,id: 'mainReLoad'
        });
        //监听事件
        table.on('toolbar(test)', function (obj) {
            let checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'add':
                    layer.msg('添加');
                    layer.open({
                        type: 1,
                        title: '添加用户',
                        area:['50%','70%'],
                        content: $('#editDialog').html(), //这里content是一个普通的String
                        btn: ['确定', '取消'],
                        success: function (index, layero) {
                            form.render();
                        },
                        yes: function (index, layero) {
                                let data = {};
                                let t = $('#modify').serializeArray();
                                $.each(t, function() {
                                    data [this.name] = this.value;
                                });

                                $.post('../connect.php',{
                                    type: 'addNewUser',
                                    username: data.username,
                                    password: data.password,
                                    email: data.email,
                                    isAdmin: data.isAdmin,
                                    isBanned: data.isBanned
                                },function (data){
                                    if(data === '3'){
                                        layer.msg('已有重复的用户名')
                                    }else if(data === '2'){
                                        layer.msg('信息请填写完整')
                                    }else if(data === '1'){
                                        layer.msg('添加成功')
                                        layer.close(index);
                                    }else{
                                        console.log(data)
                                    }
                                    console.log(data)
                                })
                            },
                        btn2: function (index, layero) {
                            //return false 开启该代码可禁止点击该按钮关闭
                        }
                    });
                    break;
                case 'delete':
                    console.log(checkStatus);
                    layer.confirm('真的删除选中行么', function (index) {
                        layer.close(index);
                        //向服务端发送删除指令
                    });
                    break;
            }
        });

        //监听工具条
        table.on('tool(test)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            let data = obj.data; //获得当前行数据
            let layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            let tr = obj.tr; //获得当前行 tr 的DOM对象

            if (layEvent === 'detail') { //查看
                //do something
            } else if (layEvent === 'del') { //删除
                layer.confirm('真的删除行么', function (index) {
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.close(index);
                    //向服务端发送删除指令
                    $.post('../connect.php',{
                        type: 'delUser',
                        uid: data.uid
                    },function (data){
                        if(data === '0'){
                            layer.msg('删除失败')
                        }
                    })
                });
            } else if (layEvent === 'edit') { //编辑
                //do something
                layer.open({
                    type: 1,
                    title: '编辑用户信息',
                    area:['50%','70%'],
                    content: $('#editDialog').html(), //这里content是一个普通的String
                    btn: ['确定', '取消'],
                    success: function (index, layero) {
                        form.render();
                        form.val("editDialogForm",data);
                    },
                    yes: function (index, layero) {
                         let data = {};
                         let t = $('#modify').serializeArray();
                         $.each(t, function() {
                             data [this.name] = this.value;
                         });

                         $.post('../connect.php',{
                             type: 'modify',
                             targetuid: obj.data.uid,
                             username: data.username,
                             password: data.password,
                             email: data.email,
                             isAdmin: data.isAdmin,
                             isBanned: data.isBanned
                         },function (data){
                             let newData = $.parseJSON(data)
                             newData.status ? layer.msg('修改成功') : layer.msg('修改失败')
                            let update = newData.newUserInfo
                             obj.update({
                                 username: update.username,
                                 uid: update.uid,
                                 email: update.email,
                                 regDate: update.regDate,
                                 isBanned: +update.isBanned ? '是':'否',
                                 isAdmin: +update.isAdmin ? '是':'否'
                             })
                         })
                        layer.close(index);
                    },
                    btn2: function (index, layero) {
                        layer.msg('关闭')
                    }
                });

                //同步更新缓存对应的值
                obj.update({
                    username: data.username,
                    uid: data.uid,
                    email: data.email,
                    regDate: data.regDate,
                    isBanned: data.isBanned,
                    isAdmin: data.isAdmin
                });
            }
        });
    }
</script>